<template>
	<view class="profile_box">
		<bottom-rect type="normal" class="bottom_rect"></bottom-rect>

		<view class="profile_info_box">
			<!-- 用户顶部卡片 -->
			<view class="profile_info_card">
				<!-- 顶部信息 -->
				<view class="card_top">
					<!-- 具体信息 -->
					<view class="nickname_infos">
						<view class="nickname_box">
							<text class="nickname_text main-font-color font-weight-bold">{{userInfo.nickname}}</text>

							<input type="nickname"
								:class="[{'doNotShowUp':isShowUpInput == false}, 'nickname_input', 'font-weight-bold']"
								@blur="changeNickname" placeholder="请输入新的昵称" :focus="isFocus"
								placeholder-style="font-size: 40rpx; color:#b3b3b3;">

							<uni-icons class="edit" type="compose" size="24" color="#B3B3B3"
								@click="showUpNicknameInput"></uni-icons>
						</view>
						<view class="real_profile_infos">
							<view class="infos_left infos">
								<text>{{userInfo.profile.name}}</text>
								<text>{{userInfo.profile.college}}</text>
							</view>
							<view class="infos_right infos">
								<text>{{userInfo.profile.student_ID}}</text>
								<text>{{userInfo.profile.specialty}}</text>
							</view>
						</view>
					</view>
					<!-- 头像 -->
					<button class="avatar" open-type="chooseAvatar" @chooseavatar="changeAvatar">
						<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
					</button>
				</view>
				<!-- 底部功能按钮 -->
				<scan-code></scan-code>
			</view>

			<!-- 用户的发布以及找回信息盒子 -->
			<view class="profile_info_details">
				<view>
					<view class="published_and_getback" @click="navigate_to_myPbulished">
						<view class="title">
							<image src="/static/profile/publish.png"></image>
							<text class="main-font-color font-weight-bold">我的发布</text>
						</view>
						<image src="/static/profile/arrow_right.png"></image>
					</view>
					<view class="published_and_getback" @click="navigate_to_myGetBack">
						<view class="title">
							<image src="/static/profile/found.png"></image>
							<text class="main-font-color font-weight-bold">我的找回</text>
						</view>
						<image src="/static/profile/arrow_right.png"></image>
					</view>
					<view class="published_and_getback" @click="navigate_to_conversation">
						<view class="title">
							<image src="/static/profile/chat.png"></image>
							<text class="main-font-color font-weight-bold">我的聊天</text>
						</view>
						<image src="/static/profile/arrow_right.png"></image>
					</view>
				</view>
				<!-- 额外内容 -->
				<text style="color: #EFEFEF; font-size: 24rpx;">—— 更多功能敬请期待 ——</text>
			</view>

			<!-- 退出登录按钮 -->
			<button class="logout" type="default" @click="logout">退出登录</button>
		</view>

	</view>
</template>

<script>
	import bottomRect from '@/components/bottomRect/bottomRect.vue'
	import scanCode from '@/components/scanCode/scanCode.vue'

	import {
		cancellation
	} from '@/subpkg/tim/utils/api.js';
	import logger from '@/subpkg/tim/utils/logger.js';

	const app = getApp()

	export default {
		name: 'profile',
		components: {
			bottomRect,
			scanCode
		},
		data() {
			return {
				// 缓存中的用户信息
				userInfo: {},
				// 是否显示更换昵称的输入框
				isShowUpInput: false,
				isFocus: false
			}
		},
		methods: {
			// 跳转到我的聊天页面
			navigate_to_conversation() {
				uni.navigateTo({
					url: '/subpkg/tim/TUI-Conversation/conversation/conversation'
				})
			},

			// 跳转到我的发布页面
			navigate_to_myPbulished() {
				uni.navigateTo({
					url: '/subpkg/profileSubPages/profileItems/myPublished'
				})
			},

			// 跳转到我的发布页面
			navigate_to_myGetBack() {
				uni.navigateTo({
					url: '/subpkg/profileSubPages/profileItems/myGetBack'
				})
			},

			// 显示更换昵称input
			showUpNicknameInput() {
				uni.showModal({
					title: '提示',
					content: '是否更换昵称'
				}).then(res => {
					if (res[1].confirm) {
						// 显示更换昵称的输入框
						this.isShowUpInput = true
						// 输入框聚焦
						this.isFocus = true
					}
				})
			},

			// 更换昵称
			changeNickname(e) {
				uni.showLoading({
					title: '更换中...'
				})
				// 不显示输入框
				this.isShowUpInput = false
				// 失焦
				this.isFocus = false
				// 保存旧名字
				const oldNickname = this.userInfo.nickname
				const newNickname = e.detail.value.trim()
				console.log(oldNickname, newNickname);
				const result = this.isNicknameLegal(newNickname)
				if (result) {
					this.userInfo.nickname = newNickname
					this.uploadNickname()
				} else {
					this.userInfo.nickname = oldNickname
					uni.showToast({
						title: '昵称不能为空或超过10个字',
						icon: 'none'
					})
				}
			},

			// 将昵称存到本地以及上传到数据库
			uploadNickname() {
				// 将数据存到本地
				app.globalData.userInfo = this.userInfo
				uni.setStorageSync('userInfo', this.userInfo)
				// 将数据上传到数据库
				wx.cloud.callFunction({
					name: 'change_nickname',
					data: {
						student_ID: this.userInfo.profile.student_ID,
						nickname: this.userInfo.nickname
					}
				}).then(res => {
					console.log(res);
					uni.$TUIKit.updateMyProfile({
						nick: app.globalData.userInfo.nickname
					})
					uni.hideLoading()
				})
			},

			// 判断昵称是否合法
			isNicknameLegal(newNickname) {
				if (newNickname == '' || newNickname.length > 10) {
					return false
				} else {
					return true
				}
			},

			// 更换头像
			changeAvatar(e) {
				uni.showLoading({
					title: '更换中...'
				})
				console.log(e);
				// 随机生成云存储的图片名字
				let preName = app.uuid()
				let imgFormat = e.detail.avatarUrl.substring(e.detail.avatarUrl.indexOf('.'))
				let imgName = preName + imgFormat
				console.log(imgName);
				// 上传头像图片
				wx.cloud.uploadFile({
					cloudPath: `user_info/avatarUrl_images/${imgName}`,
					filePath: e.detail.avatarUrl
				}).then(res => {
					console.log(res);
					this.userInfo.avatarUrl = res.fileID
					// 调用云函数
					this.uploadAvatarUrl()
				})
			},

			// 将头像真实地址存到本地且传到数据库
			uploadAvatarUrl() {
				app.globalData.userInfo = this.userInfo
				uni.setStorageSync('userInfo', this.userInfo)

				wx.cloud.callFunction({
					name: 'upload_avatar_url',
					data: {
						student_ID: this.userInfo.profile.student_ID,
						avatarUrl: this.userInfo.avatarUrl
					}
				}).then(res => {
					console.log(res);
					uni.$TUIKit.updateMyProfile({
						avatar: app.globalData.userInfo.avatarUrl
					})
					uni.hideLoading()
				})
			},

			// 退出登录
			logout() {
				uni.showModal({
					title: '提示',
					content: '是否退出登录'
				}).then(res => {
					// 如果点击了确定
					if (res[1].confirm) {
						// 登出聊天室
						uni.$TUIKit.logout().then(() => {
							cancellation({}, res => {
								logger.log('| TUI-User-Center | cancel  | cancellation |ok');
						
								if (res.data.errorCode === 0) {
									app.globalData.resetLoginData();
								}
							});
						});
						this.userInfo.openid = ''
						uni.setStorageSync('userInfo', this.userInfo)
						uni.navigateTo({
							url: '/pages/login/login'
						}).then(() => {
							uni.showToast({
								title: '成功登出',
								icon: "success"
							})
						})
					}
				})
			}

		},
		onShow() {
			// 获取缓存中的用户信息
			this.userInfo = uni.getStorageSync('userInfo')
		},
		// mounted() {
		// 	// 获取缓存中的用户信息
		// 	this.userInfo = uni.getStorageSync('userInfo')
		// }
	}
</script>

<style scoped lang="scss">
	// 不显示更换昵称的输入框
	.doNotShowUp {
		display: none;
	}

	.profile_box {
		background-color: #F7F7F7;
		width: 100vw;
		height: 100vh;

		.profile_info_box {
			display: flex;
			flex-direction: column;
			align-items: center;

			.profile_info_card {
				box-shadow: 0 0 8px #b8b8b8;
				box-sizing: border-box;
				padding: 30rpx;
				width: 700rpx;
				height: 320rpx;
				border-radius: 20rpx;
				margin-top: -90rpx;
				background-color: white;

				.card_top {
					height: 210rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 2rpx solid #EFEFEF;

					.nickname_infos {
						width: 470rpx;
						position: relative;

						.nickname_box {
							width: 470rpx;
							height: 65rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.nickname_text {
								font-size: 50rpx;
								width: 400rpx;
								margin-bottom: 10rpx;
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
							}

							.nickname_input {
								width: 400rpx;
								font-size: 50rpx;
								color: #504F54;
								font-weight: bold;
								margin-bottom: 10rpx;
								height: 65rpx;
								position: absolute;
								background-color: white;
							}

							.edit {
								margin-top: -5rpx;
								margin-left: 20rpx;
							}
						}

						.real_profile_infos {
							font-size: 28rpx;
							color: #B3B3B3;
							display: flex;
							justify-content: space-between;

							.infos {
								display: flex;
								flex-direction: column;
								line-height: 45rpx;
							}
						}
					}

					button::after {
						border: none;
					}

					.avatar {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
						margin: 0;

						image {
							width: 160rpx;
							height: 160rpx;
							margin-left: -28rpx;
						}
					}
				}
			}

			.profile_info_details {
				margin-top: 30rpx;
				width: 700rpx;
				height: 500rpx;
				box-shadow: 0 0 8px #cacaca;
				box-sizing: border-box;
				padding: 30rpx;
				border-radius: 20rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				// 我的发布和我的找回
				.published_and_getback {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 640rpx;
					height: 90rpx;
					border-bottom: 2rpx solid #EFEFEF;

					.title {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}

						text {
							font-size: 32rpx;
						}
					}

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			// 退出登录按钮
			button::after {
				border: none;
			}

			.logout {
				width: 700rpx;
				height: 100rpx;
				font-weight: bold;
				color: #5e5d61;
				line-height: 100rpx;
				box-shadow: 0 0 8px #cacaca;
				border-radius: 20rpx;
				background-color: white;
				margin-top: 30rpx;
			}
		}
	}
</style>
